<template>
  <div>
    <el-button type="primary" @click="updateData">更新数据</el-button>
  </div>
  <div>
    <el-row>
      <el-col :span="8">
        <div id="main" style="width: 600px; height: 400px"></div>
      </el-col>
      <el-col :span="8">
        <div id="main2" style="width: 600px; height: 400px"></div>
      </el-col>
      <el-col :span="8">
        <div id="main3" style="width: 600px; height: 400px"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref } from "vue";

const demo1 = () => {
  var myChart = echarts.init(document.getElementById("main"));
  // 绘制图表
  myChart.setOption({
    title: {
      text: "ECharts 入门示例",
    },
    tooltip: {},
    xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    },
    yAxis: {},
    series: [
      {
        name: "销量",
        type: "bar",
        data: [5, 20, 36, 10, 10, 20],
      },
    ],
  });
};
const demo2 = () => {
  var myChart = echarts.init(document.getElementById("main2"));
  // 绘制图表
  myChart.setOption({
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: "line",
      },
    ],
  });
};
const demo3 = () => {
  var myChart = echarts.init(document.getElementById("main3"));
  // 绘制图表
  myChart.setOption({
    title: {
      text: "Referer of a Website",
      subtext: "Fake Data",
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: "50%",
        data: [
          { value: 1048, name: "Search Engine" },
          { value: 735, name: "Direct" },
          { value: 580, name: "Email" },
          { value: 484, name: "Union Ads" },
          { value: 300, name: "Video Ads" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  });
};

onMounted(() => {
  demo1();
  demo2();
  demo3();
});
</script>

<style scoped></style>
